import React, { Component, PropTypes } from 'react';
import classNames from 'classnames';

import { Row, Col, Select, Input ,Button} from 'antd';

const Option = Select.Option;
const InputGroup = Input.Group;

class SimpleSearch extends Component {

    static propTypes = {
        onSearch:PropTypes.func,
        placeholder:PropTypes.string
    }
    constructor(props) {
        super(props);
        
        this.state = {
            focus:false,
            keyword:''
        }
    }
    
   
    render() {
        const { size , placeholder} = this.props;

        const btncls = classNames({
            'ant-search-btn':true,
            'simple-search-btn': true,
            'ant-search-btn-noempty': !!this.state.keyword.trim()
        })

        const searchcls = classNames({
            'ant-search-input': true,
            'ant-search-input-focus': this.state.focus
        })
        return (
            <div className="ant-search-input-wrapper">
                <div className="search-select">
                    <Row>
                        <Col span={6} className="search-item">
                            <Row className="select-and-input">
                                <Col span={8}></Col>
                                <Col span={16}>
                                     <Input 
                                        placeholder={placeholder} 
                                        value={this.state.keyword} 
                                        onChange={this.handleInputChange}
                                        onPressEnter={this.handleSearch}
                                    />
                                </Col>
                                <Button 
                                    icon="search" 
                                    className={btncls} 
                                    size={size} 
                                    onClick={this.handleSearch} 
                                />
                            </Row>
                           
                        </Col>
                    </Row>
                </div>
            </div>
        );
    }
    /**
     * 输入框onchange事件
     */
    handleInputChange = (e) => {
        this.setState({
            keyword:e.target.value
        });
    }
    /**
     * 获取和失去焦点事件
     */
    handleFocusBlur =  (e) => {
        this.setState({
            focus:e.target === document.activeElement
        });
    }
    /**
     * 搜索
     */
    handleSearch = () => {
        if(this.props.onSearch){
            this.props.onSearch({title:this.state.keyword})
        }
    }
}

//const SimpleSearchForm = Form.create()(SimpleSearch)
export default SimpleSearch;